<extend name="Common:common"/>
<block name="main">

        <div class="main-content">
            <div class="breadcrumbs" id="breadcrumbs">
                <script type="text/javascript">
                    try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
                </script>

                <ul class="breadcrumb">
                    <li>
                        <i class="icon-home home-icon"></i>
                        <a href="#">Home</a>
                    </li>

                    <li>
                        <a href="#">UI Elements</a>
                    </li>
                    <li class="active">Treeview</li>
                </ul><!-- .breadcrumb -->

                <div class="nav-search" id="nav-search">
                    <form class="form-search">
								<span class="input-icon">
									<input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
									<i class="icon-search nav-search-icon"></i>
								</span>
                    </form>
                </div><!-- #nav-search -->
            </div>

            <div class="page-content">
                <div class="page-header">
                    <h1>
                        Treeview
                        <small>
                            <i class="icon-double-angle-right"></i>
                            with selectable items(single &amp; multiple) and custom icons
                        </small>
                    </h1>
                </div><!-- /.page-header -->

                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->

                        <div class="row">
                            <div class="col-sm-6">
                                <div class="widget-box">
                                    <div class="widget-header header-color-blue2">
                                        <h4 class="lighter smaller">Choose Categories</h4>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-8">
                                            <div id="tree1" class="tree"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-sm-6">
                                <div class="widget-box">
                                    <div class="widget-header header-color-green2">
                                        <h4 class="lighter smaller">Browse Files</h4>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main padding-8">
                                            <div id="tree2" class="tree"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <script type="text/javascript">
                            var $assets = "assets";//this will be used in fuelux.tree-sampledata.js
                        </script>

                        <!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.page-content -->
        </div><!-- /.main-content -->

    <!--这个Jquery必须的同时引入，不然的话就没有分类树的出现-->

    <script type="text/javascript">
        window.jQuery || document.write("<script src='__PUBLIC__/Backend/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
    </script>

    <!-- page specific plugin scripts -->

    <script src="__PUBLIC__/Backend/js/fuelux/data/fuelux.tree-categorydata.js"></script>
    <script src="__PUBLIC__/Backend/js/fuelux/fuelux.tree.min.js"></script>

</block>